<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Title</title>
</head>
<body>
<!--前端渲染-->
<!--后端渲染 服务端渲染 将数据逻辑渲染好之后返回给前端  后端处理URL和页面之间的映射关系-->
<div id="app">
  {{ message }}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
    }
  })
  setTimeout(() => {
    console.log(this)  //window
  })
  // 箭头函数中的this引用的是最近作用域中的this
  // 箭头函数向外层作用域中一层一层查找this,直到有this的定义
  const obj = {
    aaa() {
      // 通过call函数并且传过来一个window
      console.log(this)  // 当前对象
      setTimeout(function () {
        // window
        console.log('aaa',this)
      })
      // 引用
      setTimeout(() => {
        console.log('bbb',this)   // obj
      })
    },
    ddd: () => {
      // window
      setTimeout(() => {
        console.log('ddd',this)
      })
    }
  }
  obj.aaa()
  obj.ddd()
</script>
</body>
</html>
